<template>
  <div id="doubleDoughnutChart" class="chart" :style="{width: '90%', height: height+'px'}"></div>
  <!--  <div>{{ selectYear }}</div>-->
</template>

<script>
import * as echarts from 'echarts'
import { resizePxNum } from '@/utils'
import { getAction } from '@api/manage'

export default {
  name: 'doubleDoughnutChart',
  components: {
    resizePxNum
  },
  props: {
    height: {
      type: Number,
      default: 400
    },
    selectArea: {
      type: String,
      default: ''
    },
    selectYear: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      defaultYear: '2022',
      totalData: 0,
      industryData: 0,//工业总数据
      industryPower: 0,//工业-电力
      industryGas: 0,//工业-天然气
      industryPetroleum: 0,//工业-油品
      industryOther: 0,//工业-其他能源

      otherData: 0,//其他总数据
      otherPower: 0,//其他-电力
      otheryGas: 0,//其他-天然气
      otherPetroleum: 0,//其他-油品

      residentData: 0,//居民总数据
      residentPower: 0,//居民-电力
      residentGas: 0,//居民-天然气
      residentPetroleum: 0//居民-油品

    }
  },
  mounted() {
    // this.echartsInit()
    this.getData()
    setTimeout(() => {
      this.echartsInit()
    }, 500)
    window.addEventListener('resize', () => {
      this.echartsInit()
    })
    // console.log("区域变化",this.selectArea)
    // console.log("选择年份",this.selectYear)
  },
  watch: {
    // logArea(val){
    //   console.log(val)
    // },
    selectYear(newval, oldval) {
      // console.log(newval)
      this.getData()
      setTimeout(() => {
        this.echartsInit()
      }, 500)
    },
    selectArea(newval, oldval) {
      // console.log(newval)
      this.getData()
      setTimeout(() => {
        this.echartsInit()
      }, 500)
    }
  },
  methods: {
    echartsInit() {
      let option = {
        // grid: {
        //   x: '5%',//x 偏移量
        //   y: '50%', // y 偏移量
        //   width: '50%', // 宽度
        //   height: '50%'// 高度
        // },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          itemWidth: resizePxNum(10), // 图例图标宽度
          itemHeight: resizePxNum(10),// 图例图标高度
          left: resizePxNum(415),
          top: resizePxNum(110),
          padding: [220, 0, 20, 30],
          data: ['工业', '其他行业', '居民'],
          textStyle: {
            color: '#5B6264'//图例文字颜色
          }
        },
        series: [

          {
            //外环
            name: '',
            type: 'pie',
            radius: ['44%', '75%'],
            center:['50%','58%'],
            avoidLabelOverlap: false,
            minShowLabelAngle: 10,
            emphasis: {
              label: {
                show: true,
                fontSize: '16',
                fontWeight: 'bold',
                color: '#E9F7F6'
              }
              //鼠标移上数值的样式
            },
            label: {
              show: true,
              formatter: '{b}\n{d}%',
              position: 'inner'
              //显示数值
            },
            labelLine: {
              show: true
              //是否显示数值
            },

            data: [
              {
                itemStyle: {
                  color: '#154847'
                },
                value: this.industryPower,
                name: '电力'
              },
              {
                itemStyle: {
                  color: '#22716F'
                },
                value: this.industryGas,
                name: '天然气'
              },
              {
                itemStyle: {
                  color: '#2C9492'
                },
                value: this.industryPetroleum,
                name: '油品'
              },
              {
                itemStyle: {
                  color: '#35B3AF'
                },
                value: this.industryOther,
                name: '其他能源'
              },
              {
                itemStyle: {
                  color: '#285B76'
                },
                value: this.otherPower,
                name: '电力'
              },
              {
                itemStyle: {
                  color: '#284F63'
                },
                value: this.otheryGas,
                name: '天然气'
              },
              {
                itemStyle: {
                  color: '#284352'
                },
                value: this.otherPetroleum,
                name: '油品'
              },
              {
                itemStyle: {
                  color: '#D8A042'
                },
                value: this.residentPower,
                name: '电力'
              },
              {
                itemStyle: {
                  color: '#C27F33'
                },
                value: this.residentGas,
                name: '天然气'
              },
              {
                itemStyle: {
                  color: '#AC5D25'
                },
                value: this.residentPetroleum,
                name: '油品'
              }
            ]
          },
          {
            //内环
            name: '',
            type: 'pie',
            radius: ['20%', '43%'],
            center:['50%','58%'],//圆心位置
            avoidLabelOverlap: false,
            emphasis: {
              label: {
                show: true,
                fontSize: '16',
                fontWeight: 'bold',
                color: '#E9F7F6'
              }
              //鼠标移上数值的样式
            },
            label: {
              show: true,
              formatter: '{b}\n{d}%',
              position: 'inner'
              //显示数值
            },
            labelLine: {
              show: true
              //是否显示数值
            },
            data: [

              {
                itemStyle: {
                  color: '#2C9492'
                },
                value: this.industryData, name: '工业'
              },
              {
                itemStyle: {
                  color: '#23709D'
                },
                value: this.otherData, name: '其他行业'
              },
              {
                // itemStyle: {
                //   color: {
                //     type: 'linear',
                //     x: 0,  //右
                //     y: 0,  //下
                //     x2: 0,  //左
                //     y2: 1,  //上
                //     colorStops: [
                //       {
                //         offset: 0,
                //         color: '#A65521' // 0% 处的颜色
                //       },
                //       {
                //         offset: 1,
                //         color: '#DDA745' // 100% 处的颜色
                //       }
                //     ]
                //   }
                // },
                itemStyle: {
                  color: '#C27F33'
                },
                value: this.residentData,
                name: '居民'
              }
            ]
          }
        ]
      }
      this.myChart = echarts.init(document.getElementById('doubleDoughnutChart'))
      this.myChart.setOption(option)

      window.addEventListener('resize', () => {
        if (this.myChart) {
          this.myChart.resize()
        }
      })
    },
    getData() {
      getAction('/carbon/regionTarget/getData', { year: this.selectYear, area: this.selectArea })
        .then((res) => {
          // console.log(res.result[0])
          // console.log(res.result[0].gyDl)
          this.industryData = res.result[0].gyTotal//工业总
          this.industryPower = res.result[0].gyDl//工业-电力
          this.industryGas = res.result[0].gyTrq//工业-天然气
          this.industryPetroleum = res.result[0].gyOil//工业-油品
          this.industryOther = res.result[0].gyOther//工业-其他能源

          this.otherData = res.result[0].qthyTotal//其他总
          this.otherPower = res.result[0].qthyDl//其他-电力
          this.otheryGas = res.result[0].qthyTrq//其他-天然气
          this.otherPetroleum = res.result[0].qthyOil//其他-油品

          this.residentData = res.result[0].jmTotal//居民总
          this.residentPower = res.result[0].jmDl//居民-电力
          this.residentGas = res.result[0].jmTrq//居民-天然气
          this.residentPetroleum = res.result[0].jmOil//居民-油品

          // if (res.result) {
          //
          // }
        })
    }
  }
}
</script>

<style scoped>

</style>